<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- <input type="text" v-model.lazy.number.trim="msg"> -->
        <input type="text" v-model.number="obj.a">
        <input type="text" v-model.number="obj.b">
    </div>
</body>
<script>

    // 对比methods 和 computed
    // methods => 方法 => xxx()
    // computed => 计算属性(值)  => xxx

    // methods => 只要视图更新,methods都会重新执行
    // computed  => 会缓存计算的结果,只有当它依赖的数据发生改变,才会重新计算缓存的新的结果


    // computed 和 watch
    // computed => 根据data中的数据得到的新值(也可以被监听), 对应的函数在应用初始化渲染时,默认执行一次
    // watch   => 监听data中的数据发生变化,  从而可以执行一些副作用操作(数据改变对其他操作造成的影响)




    // for (let key in data) {  //  将data中的每个属性在 实例上也挂载一份
    //     // key => count msg  obj
    //     var val = data[key];
    //     if (Object.prototype.toString.call(val) === "[object Object]") {
    //         for (let k in val) {  //  将data中的每个属性在 实例上也挂载一份
    //             // key => count msg  obj
    //             var v = val[k];
    //             Object.defineProperty(this, v, {
    //                 //  取值拦截
    //                 get: function () {
    //                     console.log("实例化对象取值拦截", key);
    //                     return data[key];
    //                 },
    //                 // 赋值拦截
    //                 set: function (val) {
    //                     console.log("实例化对象赋值拦截", key);
    //                     data[key] = val;
    //                 }
    //             })
    //         }
    //     } else {
    //         Object.defineProperty(this, key, {
    //             //  取值拦截
    //             get: function () {
    //                 console.log("实例化对象取值拦截", key);
    //                 return data[key];
    //             },
    //             // 赋值拦截
    //             set: function (val) {
    //                 console.log("实例化对象赋值拦截", key);
    //                 data[key] = val;
    //             }
    //         })
    //     }
    // }

    var vm = new Vue({
        el: "#app",
        data: {
            msg: null,
            count: 1,
            obj: {
                a: 1,
                b: 2,
            }
        },
        computed: {
            double: function () {
                return this.count * 2;
            },
            objCopy: function () {
                return JSON.parse(JSON.stringify(this.obj));
            }
        },
        watch: {
            msg: function (newVal) {
                console.log(newVal);
            },
            // obj: function (newVal) {
            //     console.log("obj改变", newVal);
            // }

            // obj: {
            //     handler: function (newVal, oldVal) {
            //         console.log("obj改变", newVal);
            //     },
            //     deep: true,
            // },

            // "obj.a": function (newVal, oldVal) {
            //     console.log("obj改变", newVal);
            // },
            // ["obj.b"](newVal, oldVal) {
            //     console.log("obj改变", newVal);
            // },

            objCopy: function (newVal, oldVal) {
                console.log("objCopy改变", newVal, oldVal);
            },
        }
    })



</script>

</html>